<template>
	<div>
		<div class="header">
			  <div class="headerLeft" @click='goBack'><span class="iconfont">&#xe68b;</span></div>
			  <div class="headerMiddle">我的同程</div>
			  <div class="headerRight" @click='isShowClick'>
				  <span class="iconfont">&#xe637;</span>
			  </div>
		</div>
		<transition name="bounce">
			<div class="mydiv" v-if='isShow'>
				 <div class="mydiv2"></div>
				 <div class="content">
					 <div @click="gohome"><span class="iconfont">&#xe61a;</span>首页</div>
					 <div @click="gologin"><span class="iconfont">&#xe6c5;</span>我的同程</div>
					 <div @click="noLoginFn" class="noLogin" v-if='!isLogin'><span class="iconfont">&#xe653;</span>登录/注册</div>
					 <div @click="LoginedFn" class="Logined" v-if='isLogin'><span class="iconfont">&#xe653;</span>登出/注销</div>
				 </div>
			</div>
		</transition>
	</div>
</template>
<script>
export default {
  name: 'detailHeader',
  data(){
	  return{
		  isShow:false,
		  isShowMember:false,
		  isLogin:false
	  }
  },
  methods:{
	  gohome(){
	  		  this.$router.push('/')
	  },
	  gologin(){
	  		  this.$router.push('/login')
	  		  this.$router.go(0)
	  },
	  goBack(){
		  this.$router.push('/travelhome')
	  },
	  isShowClick(){
	  		  this.isShow=!this.isShow
	  },
	  noLoginFn(){
	  		  this.$router.push('/loginPage')
	  },
	  LoginedFn(){
	  		  this.$store.state.loginId=0
	  		  this.isLogin=false
	  		  sessionStorage.removeItem("loginId")
	  		  this.gologin()
	  },
  },
  mounted(){
	  if(this.$store.state.loginId){
	  		  this.isLogin=true
	  }else{
	  		  this.isLogin=false
	  }
  }
}
</script>
<style type="text/css" scoped>
	.bounce-enter-active {
	  transition: all .3s ease;
	}
	.bounce-leave-active {
	  transition: all .2s ease;
	}
	.bounce-enter, .bounce-leave-to
	{
	  transform: translateX(2rem);
	  opacity: 0;
	}
	.mydiv{
		padding-top: .1rem;
		width: 2.5rem;
		height:2.5rem;
		border: 1px solid #000;
		background: #333;
		position: absolute;
		display: block;
		top: 0.9rem;
		right: 0.1rem;
		border-radius: 0.2rem;
		z-index: 200;
	}
	.mydiv2{
		position: absolute;
		top: -0.12rem;
		right: 0.3rem;
		height: 0.22rem;
		width: 0.22rem;
		box-shadow: 1px 1px 2px rgba(0,0,0,.06);
		background-color: #333;
		transform: rotate(-135deg);
		-webkit-transform: rotate(-135deg);
		-moz-transform: rotate(-135deg);
		-o-transform: rotate(-135deg);
		-ms-transform: rotate(-135deg);
		-sand-transform: rotate(135deg);
	}
	.content{
		width: 100%;
		color:#fff;
		
	}
	.content>div{
		width: 100%;
		font-size: 0.33rem;
		margin:0.2rem 0;
		border-bottom:1px solid #555;
		padding-bottom: 0.1rem;
	}
	.content>div .iconfont{
		margin:0 0.2rem;
		font-size: 0.4rem;
	}
</style>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.header
		width:100%
		display:flex
		padding:0.25rem
		box-sizing:border-box
		.headerLeft
			float:left
			font-weight:bold
			color:#31c2b2
		.headerMiddle
			flex:1
			text-align:center
			font-size:0.35rem
			font-weight:bold
		.headerRight
			float:right
			text-align:right
			font-weight:bold
			color:#31c2b2
	
</style>
